<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('查看有权人签字')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: jq-viewer-css" />
    <style>
        #imageBox img{width:100%;display:none}
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-signature-view" th:object="${paeaParaAuthorizedSignature}">
            <input id="id" name="id" th:field="*{id}" type="hidden">
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人机构号：</label>
                <div class="col-sm-4">
                    <input id="orgCode" name="orgCode" th:field="*{orgCode}" class="form-control" type="text" readonly>
                </div>
                <label class="col-sm-2 control-label">授权人机构名称：</label>
                <div class="col-sm-4">
                    <input id="orgName" name="orgName" th:field="*{orgName}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人职位：</label>
                <div class="col-sm-4">
                    <input id="position" name="position" th:field="*{position}" class="form-control" type="text" readonly>
                </div>
                <label class="col-sm-2 control-label">授权人姓名：</label>
                <div class="col-sm-4">
                    <input id="name" name="name" th:field="*{name}" class="form-control" type="text" readonly>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">授权人签字图片名：</label>
                <div class="col-sm-8">
                    <input id="signatureName" name="signatureName" th:field="*{signatureName}" class="form-control" type="text" readonly>
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-2 control-label">影像启用日期：</label>
                <div class="col-sm-4">
                     <input id="startDate" name="startDate" th:value="${#dates.format(paeaParaAuthorizedSignature.startDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                </div>
                <label class="col-sm-2 control-label">影像停用日期：</label>
                <div class="col-sm-4">
                    <input id="endDate" name="endDate" th:value="${#dates.format(paeaParaAuthorizedSignature.endDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人签字图片：</label>
                <div class="col-sm-10">
                    <div class="box-main" style="width:100%;height:100%">
                        <div id="imageBox" style="height:425px;">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include :: jq-viewer-js" />
    <script th:inline="javascript">
        var prefix = ctx + "paea/signature";
        var signaturePath = [[${_signaturePath}]];
        //初始化影像显示
        function initImageArea() {
            //加载一张默认图片
            $('#imageBox').append('<img id="imgArea" src="" />');
            $('#imageBox').viewer({inline:true}).viewer('update');
        }
        //初始化影像
        function initImage() {
            $('#imgArea').attr("src", signaturePath);
            $('#imageBox').viewer({inline:true}).viewer('update');
        }
        $(function() {
            initImageArea();
            initImage();
        });
        /*
        $("#signature").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '#',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [
                signaturePath
            ]
        });*/
    </script>
</body>
</html>